<script setup>
import { ref, onMounted,defineProps} from 'vue'
// LtagBox 就是LinTagBox的意思，没有特殊含义
const props = defineProps({
    tags: {
        type: Array,
        default: () => []
    }
})
const onClick = () => {
    console.log('点击了标签');
}

onMounted(() => {
    
   

})

</script>

<template>
    <div class="box" @click="onClick">
        <div class="tag-box" v-for=" (tag,index ) in props.tags" :key="index">
            <span>
                {{ tag.text }}
            </span>
        </div>
    </div>

</template>

<style lang="scss" scoped>
.box {
    width: 220px;
    min-width: 200px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: left;
}

.tag-box {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #fff;
    border: 1px solid #ccc;
    text-align: center;
    height: 28px;
    padding: 2px;
    border-radius: 5px;
    font-size: 12px;
    color: #666;
    margin-right: 5px;
    margin-bottom: 5px;

    span {
        &::before {
            content: '';
            background-color: red;
            width: 8px;
            height: 8px;
            border-radius: 50%;
            display: inline-block;
        }
    }

}
</style>